<template>
  <div class='vw-wel'>
    <!--新块-->
    <div class="nav-group" style='margin: 0 auto; width: 1080px'>
      <div class="newBox" style="margin: 0;
	font-family: Microsoft Yahei;
	font-size: 26px;
	color: #89d4fc;">
        <div class="menubar">
          <div class="bar" style="">
            <img src="../image/shujuchuli.png">
            <span>目录清单管理</span>
          </div>
          <div class="bar">
            <img src="../image/shujuzhili.png">
            <span>规划实施跟踪</span>
          </div>
          <div style="margin-right: 0px" class="bar">
            <img src="../image/gongxiangfengxi.png">
            <span>规划成果管理</span>
          </div>
        </div>
        <div class="menu-button">
          <div class="buttongroup-1">
            <div style="margin-right: 4px" class="button-1" @click="handleAdd()">
              <span style="line-height: 150px">编制申请</span>
            </div>
            <div class="button-2" @click="goTo('/protocol')"
                 v-if="permissions.planning_list_kjgh || permissions.planning_list_zxqy">
              <span style="line-height: 150px">清单报批</span>
            </div>
            <div v-else class="button-0"></div>
            <div class="button-8" style="margin-top: 4px;margin-right: 4px" @click="goTo('/listConlumn')">
              <span style="line-height: 150px">结果查询</span>
            </div>
            <div style="margin-top: 4px" class="button-0"></div>
          </div>
          <div class="buttongroup-1">
            <div style="margin-right: 4px" class="button-3" @click="goTo('/pim/model/index')">
              <span style="line-height: 150px">责任分解</span>
            </div>
            <div class="button-4" @click="goTo('/pim/monitor/index')">
              <span style="line-height: 150px">监测评估</span>
            </div>

            <div class="button-10" style="margin-top: 4px;margin-right: 4px" @click="goTo('/adjustment')">
              <span style="line-height: 150px">修订调整</span>
            </div>
            <div style="margin-top: 4px" class="button-0"></div>
          </div>
          <div style="margin-right: 0px;" class="buttongroup-1">
            <div style="margin-right: 4px" class="button-5" @click="goTo('/resultAdd')">
              <span style="line-height: 150px">成果录入</span>
            </div>
            <div class="button-6" @click="goTo('/listFeedback/detail/cgrk')">
              <span style="line-height: 150px">成果查询</span>
            </div>
            <div style="margin-top: 4px;margin-right: 4px" @click="goTo('/projectChart')" class="button-7">
              <span style="line-height: 150px">成果统计</span>
            </div>
            <div style="margin-top: 4px" class="button-0"></div>
          </div>
        </div>
        <!--云图显示块-->
        <div class="menubar" style="margin-top: 10px;">
          <div class="bar" style="margin-right: 90px; height: 100px;line-height: 100px;">
            <img src="../image/datacloud.png" style="margin-top: 28px;">
            <span>规划流程管理</span>
          </div>
          <div class="data-cloud--box">
            <ul>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <li class="el-icon-arrow-down el-icon--right">前期研究</li>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div class="el-dropdown-wel el-icon-edit-outline" @click.stop="goTo('/subjectPlanList')">课题计划</div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div class="el-dropdown-wel el-icon-s-tools" @click.stop="goTo('/subjectReportList')">课题研究</div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div class="el-dropdown-wel el-icon-s-claim" @click.stop="goTo('/subjectRelease')">课题成果</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <li class="el-icon-arrow-down el-icon--right">规划编制</li>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div class="el-dropdown-wel el-icon-document" @click.stop="goTo('/planningPlait',{type:'起草文稿'})">起草文稿
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div class="el-dropdown-wel el-icon-chat-dot-round" @click.stop="goTo('/planningPlait',{type:'征求意见'})">征求意见
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div class="el-dropdown-wel el-icon-chat-line-square" @click.stop="goTo('/argumentReview')">论证评审</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <li class="el-icon-arrow-down el-icon--right">审批发布</li>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div class="el-dropdown-wel el-icon-connection" @click.stop="goTo('/planningConnection')">规划衔接</div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div class="el-dropdown-wel el-icon-s-check" @click.stop="goTo('/planningReleaseList')">规划发布</div>
                  </el-dropdown-item>
                  <!-- <el-dropdown-item>
                    <div class="el-dropdown-wel el-icon-s-order" @click.stop="goTo('/resultReleaseList')">成果发布</div>
                  </el-dropdown-item> -->
                </el-dropdown-menu>
              </el-dropdown>
            </ul>
          </div>
        </div>
      </div>
      <!--右侧块-->
      <div class="rightMenu">
        <div class="workTextBox">
          <span style="color: white">我的工作</span>
        </div>
        <div class="taskBox">
          <div class="wel-right" @click.stop="goTo('/toDo')">
            <el-badge :value="getToDoTotal()" class="el-badge-news"  v-if="getToDoTotal() != 0">
              <span style="color: #267CED;">待办任务</span>
            </el-badge>
            <span style="color: #267CED;" v-if="getToDoTotal()  == 0">待办任务</span>
          </div>
          <div class="wel-right" @click.stop="goTo('/finished')">
            <span style="color: #267CED;">已办任务</span>
          </div>
          <div class="wel-right" style="border-bottom: 0;" @click.stop="goTo('/application')">
            <span style="color: #267CED;">任务跟踪</span>
          </div>
        </div>
        <div style=" height: 38px;
    line-height: 38px;font-size: 23px;text-align: center;background: #DEEDFF;box-shadow:0px 0px 12px 0px rgba(0, 0, 0, 0.28);">
          <!--<p class="el-icon-d-arrow-right"></p>-->
          <div class="el-icon-d-arrow-right" style="color: #267CED"></div>
        </div>
      </div>
    </div>
    <el-dialog title="选择规划类型"
               :visible.sync="dialogVisible"
               :width="dialogWidthParam">
      <div class="item-group">
        <div class="item-choose"
             :class="{'isActive':chooseFlag == 'A'}"
             @click.stop="changeChoose('A')"
             v-if="fgwJudgeView">
          <div class="item-choose-img"><img :src="`${publicPath}img/develop.png`"
                                            style="width: 75%;"/></div>
          <div class="item-choose-label  item-choose-label-orange">发展规划(纲要)</div>
        </div>
        <div class="item-choose"
             :class="{'isActive':chooseFlag == 'D'}"
             @click.stop="changeChoose('D')">
          <div class="item-choose-img"><img :src="`${publicPath}img/space.png`"
                                            style="width: 75%;"/></div>
          <div class="item-choose-label item-choose-label-yellow">空间规划</div>
        </div>
        <div class="item-choose"
             :class="{'isActive':chooseFlag == 'B'}"
             @click.stop="changeChoose('B')">
          <div class="item-choose-img"><img :src="`${publicPath}img/special.png`"
                                            style="width: 75%;"/></div>
          <div class="item-choose-label item-choose-label-primary">专项规划</div>
        </div>
        <div class="item-choose"
             :class="{'isActive':chooseFlag == 'C'}"
             @click.stop="changeChoose('C')">
          <div class="item-choose-img"><img :src="`${publicPath}img/area.png`"
                                            style="width: 75%;"/></div>
          <div class="item-choose-label item-choose-label-green">区域规划</div>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary"
                   @click="next()">下一步
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import {projectRegister, projectList} from "@/api/planning/project";
  import {resultHotWord} from "@/api/planning/result";
  import {listTask} from "@/api/planning/detailList";
  import {getTopicPage, rollData} from "@/api/planning/message";
  import {mapGetters} from "vuex";
  import {getunreadMsg} from "@/api/system";
  import {toDoList, toDoTargetOpinion, toDoReviewList} from "@/api/review";
  import {getLevyFeedbackSingleList, getEndSubjectList} from "@/api/subject";
  import {getTodoList} from "@/api/fileTask";
  import {opinionTagertList} from "@/api/opinion"
  import messageScroll from '@/components/currency/messageScroll'
  import {toDoReportList, taskTodo, decomposeDraftProgressTree} from "@/api/pim/pim";


  export default {
    name: "wel",
    data() {
      return {
        rollMessageData: [],
        publicPath: process.env.BASE_URL,
        realTime: '',//当前时间
        searchInput: '',//搜索框信息
        dialogVisible: false,
        chooseFlag: 'A',
        scheduleTotal: 0,//待办规划数量
        listTotal: 0,//待办清单数量
        topicTotal: 0,//会商反馈数量
        reviewTotal: 0,//待办审批数量
        unreadMsgTotal: 0,//通知消息数量
        opinionTotal: 0,//意见反馈数量
        subjectTotal: 0,//课题征集数量
        collectionTotal: 0,//材料收集数量
        opinionTagertTotal: 0,//规划衔接数量
        endSubjectTotal: 0,//结题申请数量
        reportTotal: 0,//监测评估数量
        adjustTotal: 0,//修订调整数量
        workitemTotal: 0,//进度上报数量
        fgwJudgeView: false,
        dialogWidthParam: '1000px',
      };
    },
    mounted() {
      this.getScheduleList();
      this.getTaskList();
      this.getTopicList();
      this.getReviewList();
      this.hotSearch();
      this.realTime = this.dealWithTime();
      this.getUnreadTotal();
      this.getToDoList();
      this.getResultList();
      this.getmaterialCollectionSingle();
      this.getopinionTagertList();
      this.getendSubjectTotal();
      this.getReportTotalTotal();
      this.getAdjustTotal();
      this.decomposeDraftProgressTree();
      this.rollData()
    },
    computed: mapGetters([
      "userInfo",
      "permissions",
      "roles"
    ]),
    filters: {
      // 不显示0
      notZero: function (value) {
        if (value == 0) {
          return ''
        }
        return value
      }
    },
    watch: {
      searchInput: function (val) {
        this.hotSearch(val);
      }
    },
    methods: {
      rollData() {
        rollData().then(response => {
          if (response.data.code == 0) {
            this.rollMessageData = response.data.data;
          }
        })
      },
      getToDoTotal() {
        let total = this.scheduleTotal + this.listTotal + this.topicTotal + this.reviewTotal + this.workitemTotal + this.opinionTotal + this.opinionTagertTotal + this.endSubjectTotal + this.subjectTotal + this.collectionTotal + this.reportTotal + this.adjustTotal;
        return total;
      },
      //scheduleTotal：待办规划    listTotal：待办清单      reviewTotal：待办审批
      //opinionTotal：意见反馈     subjectTotal：课题征集   collectionTotal：材料收集
      //opinionTagertTotal：规划衔接 endSubjectTotal:结题申请 reportTotal:监测评估
      //adjustTotal:修订调整
      goTo(path, query) {
        this.$router.push({
          path: path,
          query: query
        });
      },
      searchTo() {
        sessionStorage.setItem('detailClick', 'false');
        this.$router.push({
          path: "/searchTo",
          query: {
            keyword: this.searchInput
          }
        });
      },
      //获取当前时间
      dealWithTime() {
        var data = new Date();
        let formatDateTime;
        let Y = data.getFullYear();
        let M = data.getMonth() + 1;
        let D = data.getDate();
        let W = data.getDay();
        var week = "日一二三四五六".charAt(W);
        formatDateTime = Y + "年" + M + "月" + D + "日 " + " 星期" + week;
        return formatDateTime;
      },
      // 热词搜索
      hotSearch(keyWord) {
        var self = this;
        resultHotWord({keyword: keyWord}).then(response => {
          $(this.$refs.searchInput).autocomplete({
            source: response.data.data,
            select: function (event, ui) {
              self.setSearchInput(ui.item.value)
            },
          });
        })
      },
      setSearchInput(val) {
        this.searchInput = val
      },
      regAdd() {
        this.$router.push({
          path: "/applyFor", query: {
            chooseFlag: 'A'
          }
        });
      },
      handleAdd() {
        //   this.$router.$avueRouter.group = item.group;
        if (this.roles.indexOf(8) > -1) {
          this.fgwJudgeView = true;
          this.dialogWidthParam = '1000px'
        } else {
          this.fgwJudgeView = false;
          this.dialogWidthParam = '800px'
        }
        this.dialogVisible = true;
      },
      changeChoose(index) {

        this.chooseFlag = index;
      },
      cancel() {
        this.dialogVisible = false;
      },
      next() {
        this.$router.push({
          path: "/applyFor", query: {
            chooseFlag: this.chooseFlag
          }
        });
      },
      // 获取待办规划数量
      getScheduleList() {
        projectList(Object.assign({
          current: 1,
          size: 0,
        })).then(response => {
          this.scheduleTotal = response.data.data.total
        })
      },
      getTaskList() {
        listTask(Object.assign({
          current: 1,
          size: 0
        })).then(response => {
          this.listTotal = response.data.data.total
        })
      },
      // 获取会商反馈List
      getTopicList() {
        getTopicPage({
          current: 1,
          size: 0,
          admins: 1,
          userIds: this.userInfo.userId,
          state: '1'
        }).then(response => {
          this.topicTotal = response.data.data.total
        })
      },
      // 获取审批List
      getReviewList() {
        toDoReviewList({
          current: 1,
          size: 0,
          reviewStateNe: '11'
        }).then(response => {
          this.reviewTotal = response.data.data.total
        })
      },
      getToDoList() {
        toDoTargetOpinion(Object.assign({
          current: 1,
          size: 10,
          types: '1,2,3,5,7,8',
          states: '0,1,2',
          descs: 'create_time'
        })).then(response => {
          this.opinionTotal = response.data.data.total
        })
      },
      getResultList() {
        toDoTargetOpinion(Object.assign({
          current: 1,
          size: 10,
          types: '4',
          states: '0,1,2',
          descs: 'create_time'
        })).then(response => {
          this.subjectTotal = response.data.data.total;
        })
      },
      getmaterialCollectionSingle() {
        getTodoList(Object.assign({
          current: 1,
          size: 10,
          isEnd: false,
        })).then(response => {
          this.collectionTotal = response.data.data.total;
        })
      },
      getUnreadTotal() {
        getunreadMsg(Object.assign({
          current: 1,
          size: 1,
          haveRead: false,
        })).then(response => {
          if (response.data.code == '0') {
            this.unreadMsgTotal = response.data.data.total;
          }
        })
      },
      getopinionTagertList() {
        toDoTargetOpinion(Object.assign({
          current: 1,
          size: 10,
          type: '6',
          states: '0,1,2'
        })).then(response => {
          this.opinionTagertTotal = response.data.data.total;
        })
      },
      decomposeDraftProgressTree() {
        decomposeDraftProgressTree().then(response => {
          if (response.data.code == 0) {
            let records = response.data.data.records;
            this.workitemTotal = response.data.data.total;
          }
        })
      },

      getendSubjectTotal() {
        getEndSubjectList(Object.assign({
          current: 1,
          size: 10,
          states: '0',
        })).then(response => {
          this.endSubjectTotal = response.data.data.total;
        })
      },
      getReportTotalTotal() {
        toDoReportList(Object.assign({
          current: 1,
          size: 10,
        })).then(response => {
          this.reportTotal = response.data.data.total;
        })
      },
      getAdjustTotal() {
        taskTodo(Object.assign({
          current: 1,
          size: 10,
        })).then(response => {
          this.adjustTotal = response.data.data.total;
        })
      },

    },
    components: {
      messageScroll
    }
  };
</script>

<style scoped="scoped" lang="scss">
  @import "../styles/wel/wel.css";
  // .vw-wel {
  //   .button-0
  // }
  .isActive {
    border: 2px solid #66ae7b;
  }

  .newBox {
    transform: scale(1.1);
  }

  .item-group {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }

  .item-choose-img {
    height: 170px;
    text-align: center;
    vertical-align: middle;
    padding-top: 25px;
    background-color: #f1ecec;
  }

  .item-choose-label {
    text-align: center;
    height: 55px;
    line-height: 55px;
    font-size: 19px;
    font-weight: 600;
    color: #fff;
  }

  .item-choose-label-orange {
    background-color: #00b7ee;
  }

  .item-choose-label-primary {
    background-color: #f65c4c;
  }

  .item-choose-label-green {
    background-color: #86d46e;
  }

  .item-choose-label-yellow {
    background-color: #f8b551;
  }

  .item-choose {
    margin-left: 48px;
    margin-top: 30px;
    /*border: 1px solid #dedbdb;*/
    -webkit-box-flex: 0;
    /*-ms-flex: 0 0 31%;*/
    width: 180px;
    height: 250px;
    border-radius: 3px;
  }
</style>

